<template>
  <div>
    <div class="radio">
      <div class="radio__1">
        <input id="radio-1" type="radio" name="radio" value="1" />
        <label for="radio-1"></label>
      </div>

      <div class="radio__2">
        <input id="radio-2" type="radio" name="radio" value="2" checked />
        <label for="radio-2"></label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>
<style lang="less" scoped>
/*  RADIO  */
.radio {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}
.radio input {
  display: none;
}
.radio__1 input:checked ~ label,
.radio__2 input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2 ,
    inset -0.2rem -0.2rem 0.5rem @white ;
}
.radio__1 input:checked ~ label::after,
.radio__2 input:checked ~ label::after {
  background: @primary ;
}
.radio__1 label,
.radio__2 label {
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2 ,
    -0.2rem -0.2rem 0.5rem @white ;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}
.radio__1 label:hover::after,
.radio__2 label:hover::after {
  background: @primary ;
}
.radio__1 label::after,
.radio__2 label::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background: @greyDark ;
  border-radius: 50%;
  transition: 0.3s ease;
}
</style>
